<template>
  <div class="layout-container dynamic-similarity-calculate">
    <FlowStep :activeStep="3" />
    <div class="dynmic-fuse">
      <BaseInfoForm />

      <TagIcon title="动态特征向量相似性计算结果展示" :style="tagIconStyle" />

      <div>
        <CommonTable
          :data="dynmicTable"
          v-model:page="page"
          v-loading="loading"
          :showPagination="false"
          :show-selection="false"
          @selection-change="onDynmicSelectChange"
        >
          <el-table-column prop="hisSampleName" label="历史试验数据名称" />
          <el-table-column prop="computingModeName" label="计算方式" />
          <el-table-column prop="matchDegree" label="整体加权匹配度" />
        </CommonTable>
      </div>

      <div style="margin-top: 8px">
        <TagIcon title="多种融合结果展示" :style="tagIconStyle" />

        <CommonTable
          :data="multiFuseTable"
          v-model:page="page"
          v-loading="loading"
          :showPagination="false"
          :show-selection="false"
          @selection-change="onMultiFuseSelectChange"
        >
          <el-table-column prop="hisSampleName" label="历史试验数据名称" />
          <el-table-column prop="fusionResult" label="相似结果" />
          <el-table-column prop="fusionValue" label="相似度" />
        </CommonTable>
      </div>
    </div>

    <div class="step-buttons common-buttons">
      <el-button type="primary" @click="onBack">上一步</el-button>
      <el-button type="primary" @click="onStep">下一步</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import { ElMessage, FormInstance, ElMessageBox, ElTable } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import CommonTable from "@/components/common-table/index.vue";
import { Page } from "@/components/common-table/type";
import TagIcon from "@/components/tag-icon/index.vue";
import BaseInfoForm from "../BaseInfoForm/index.vue";
import {
  httpDynmicFeatureVectorEvaluateList,
  httpDynmicFeatureVectorEvaluateStep,
} from "@/api/similarityEvaluationSystem";
import FlowStep from "../FlowStep/index.vue";

let $router = useRouter();
const route = useRoute();
const tagIconStyle = reactive({ paddingLeft: "16px", paddingBottom: 0 });
const dynmicSelectKeys = ref<string[]>([]);
const dynmicTable = ref<any>([]);
const multiFuseSelectKeys = ref<string[]>([]);
const multiFuseTable = ref<any>([]);

const loading = ref<boolean>(false);
const page = reactive<Page>({
  current: 1,
  pageSize: 20,
});
// const dynmicTotal = ref<number>(0);
// const multiFuseTotal = ref<number>(0);

onMounted(() => {
  onQuery();
});

// 查询数据
const onQuery = () => {
  loading.value = true;
  httpDynmicFeatureVectorEvaluateList({
    sampleId: route.query.dealSampleId,
  }).then((res: any) => {
    loading.value = false;
    const { code, data } = res;
    const dynamicResult = data.dynamicResult;
    if (code === 200) {
      // dynmicTotal.value = totalRows;
      // multiFuseTotal.value = totalRows;
      dynamicResult?.map((item: any) => {
        if (item.computingMode === "DTW") {
          item.computingModeName = "基于动态时间弯曲的序列距离";
        } else if (item.computingMode === "shape") {
          item.computingModeName = "基于灰色关联度的形状相似性";
        } else if (item.computingMode === "cosine") {
          item.computingModeName = "融合注意力机制的动态特征向量相似度";
        }
        return item
      });
      dynmicTable.value = dynamicResult;
      multiFuseTable.value = data.fusionResult;
      dynmicSelectKeys.value = [];
      multiFuseSelectKeys.value = [];
    }
  });
};

// 过滤出keys
const filterKeys = (arr: []) => {
  let keys: string[] = [];
  for (let item of arr) {
    keys.push(item.id);
  }
  return keys;
};

// 动态特征向量表格勾选
const onDynmicSelectChange = (val: []) => {
  dynmicSelectKeys.value = filterKeys(val);
};

// 多种融合表格勾选
const onMultiFuseSelectChange = (val: []) => {
  multiFuseSelectKeys.value = filterKeys(val);
};

// 下一步
const onStep = () => {
  $router.push({
    path: "/similarityEvaluateSystem/resultVisualDisplay",
    query: {
      dealSampleId: route.query.dealSampleId,
      sampleName: route.query.sampleName
    },
  });
};

// 返回上一步
const onBack = () => {
  $router.push({
    path: "/similarityEvaluateSystem/staticEvaluate",
    query: {},
  });
};
</script>

<style lang="scss" scoped>
@import "@/assets/style/buttons";
.dynamic-similarity-calculate {
  .dynmic-fuse {
    height: calc(100vh - 120px);
    overflow: auto;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  .layout-container-table {
    .el-button--small {
      background: transparent;
      color: rgba(24, 81, 237, 1);
    }
  }

  .step-buttons {
    display: flex;
    justify-content: center;
    box-shadow: 0px 0px 10px rgba(218, 222, 224, 1);
    padding: 10px 0;
  }
}
</style>
